<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="referrer" content="never" />
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="../tools/bootstrap-3.3.7-dist/css/bootstrap.min.css"
    />
    <link rel="stylesheet" href="../css/base.css" />
    <link rel="stylesheet" href="../css/cart.css" />
    <style>
      .footer2 {
        display: flex;
        justify-content: space-between;
        height: 60px;
        width: 1150px;
        margin: 0 auto;
        border: 1px solid #aaa;
        padding-right: 5px;
        padding-left: 5px;
      }
      .footer2 > .all2 {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .footer2 .rightSpan2 {
        display: flex;
        align-items: center;
      }
      .footer2 .rightSpan2 div {
        margin-right: 10px;
      }
      .footer2 .rightSpan2 div:nth-child(3) span {
        color: red;
      }
      .footer2 .rightSpan2 button {
        width: 100px;
        height: 40px;
        color: #fff;
        background-color: rgb(241, 55, 22);
        border: none;
      }
    </style>
  </head>
  <body>
    <div class="father">
      <header>
        <ul>
          <ol>
            <li><a href="">毛萌辉</a></li>
            <li><a href="">手机逛淘宝</a></li>
          </ol>
          <ol>
            <li><a href="./index.html">首页</a></li>
            <li><a href="">我的淘宝</a></li>
            <li><a href="">收藏夹</a></li>
            <li><a href="./list2.html">商品分类</a></li>
          </ol>
        </ul>
      </header>

      <div class="container"></div>
      <br />
      <div class="footer2"></div>
    </div>

    <!--  -->
    <script src="../tools/jquery.min.js"></script>
    <script>
      //1.封装一个函数 动态生成页面
      setPage();
      $(".rightSpan2 button").mousedown(function () {
        $(this).css("color", "#333");
      });
      $(".rightSpan2 button").mouseup(function () {
        $(this).css("color", "#fff");
      });
      function setPage() {
        //定义变量 存储 种类 数量 金额
        let type = 0;
        let number = 0;
        let money = 0;
        let money2 = 0;
        //获取本地存储的信息
        let cart = localStorage.cart; //json字符串形式
        if (cart === undefined) {
          $(".container").html(`<h1>你还没创建购物车</h1>`);
        } else {
          //已经创建了购物车
          let bool = true;
          //购物车数据
          cart = JSON.parse(cart);
          console.log(cart);
          //判断购物车数据，如果cart的长度是0；表示购物车没有商品
          if (cart.length === 0) {
            $(".container").html(
              "<h1>您的购物车已经被清空,请您再去添加商品</h1>"
            );
          } else {
            //购物车里已经有了数据信息
            //动态生成信息
            let str = ` <div class="header">
                    <p>
                        欢迎光顾本店
                    </p>
                    <p>您的每一次光临，都是对我们最大的支持!</p>
                </div>
               `;
            //中间部分
            cart.forEach(function (item, key) {
              money2 = item.goods_price * item.num;
              if (item.buy === false) {
                bool = false;
              } else {
                type++; //种类数
                number += item.num; //商品数量
                money += item.goods_price * item.num;
              }
              //中间商品部分写入
              str += ` <div class="cartInfo">
                    <div class="check">
                        <div class="check_other">
                            <input type="checkbox" name="other" index="${key}" ${
                item.buy ? "checked" : ""
              }/>
                        </div>
                        <div class="img_logo">
                            <img src="${item.goods_small_logo}" alt="" />
                        </div>
                    </div>

                        <div class="infoTxt">${item.goods_name}</div>
                        <div class="one_price">
                            <span class="newPrice">￥ ${item.goods_price}</span>
                        </div>
                        <div class="num">
                                <button name="减" index="${key}" class="btn btn-default" ${
                item.num === 1 ? "disabled" : ""
              }>-</button>
                                <input type="text" class="num" value="${
                                  item.num
                                }" />
                                <button name="加" index="${key}" type="button" class="btn btn-default" ${
                item.num == item.goods_number ? "disabled" : ""
              }>+</button>
                        </div>
                        <div class="price">￥${money2.toFixed(2)}</div>
                        <div class="doIt">
                            <a href="" class="move">移入收藏夹</a>
                            <a href="" name="del" index="${key}">删除</a>
                        </div>
                     </div>`;

              //结束部分
              let str1 = `
                      <div class="all2">
                          <div class="all">
                        <input name="all" type="checkbox" value="" />
                        <span>全选</span>
                    </div>
                      </div>

                      <div class="rightSpan2">
                          <div>已选商品 <span style="color:red">${type}</span> 种</div>
                          <div >已选商品 <span style="color:red">${number}</span>  件</div>
                          <div>合计(不含运费):<span>￥${money.toFixed(
                            2
                          )}</span> </div>
                          <button>结算</button>
                      </div>
                      `;

              //将字符串写入标签中
              $(".container").html(str);
              $(".footer2").html(str1);
              $('[name="all"]').prop("checked", bool);
            });
          }
        }
      }
      //2.给父级标签添加点击事件 通过委托事件完成函数程序的执行
      $(".container").click(function (e) {
        //获取cart数据
        const cart = JSON.parse(localStorage.cart);
        //如果点击的是全选按钮
        if (e.target.getAttribute("name") === "all") {
          //设定localStorage中 所有数据单元 buy 属性值
          cart.forEach((item) => {
            item.buy = e.target.checked;
          });
        } else if (e.target.getAttribute("name") === "other") {
          //修改索引下标 和 点击当前标签索引下标相同的数组中的数据
          cart[e.target.getAttribute("index") - 0].buy = e.target.checked;
        } else if (e.target.getAttribute("name") === "del") {
          cart.splice(e.target.getAttribute("index") - 0, 1);
        } else if (e.target.getAttribute("name") === "减") {
          cart[e.target.getAttribute("index") - 0].num--;
        } else if (e.target.getAttribute("name") === "加") {
          cart[e.target.getAttribute("index") - 0].num++;
        }

        //将新数组存储给localStorage.cart存储
        //cart转化为json字符串
        localStorage.cart = JSON.stringify(cart);
        console.log(cart);
        //调用函数 动态生成页面
        setPage();
      });
    </script>
  </body>
</html>
